<template>
  <div class="box">
    <div class="nav">
      <div class="nav-item" 
        v-for="(item,index) in navItems" 
        :key="index" 
        @click="changeActive(index)"
        :style="active == index ? 'color:#0f4494;font-weight:bold' : ''"
      >
        {{item.name}}
        <div class="line" :class="{'active':index == active}"></div>
      </div>
    </div>
    <div class="chartsbox" ref="chart" v-loading="loading"></div>
  </div>
</template>

<script>
import { decrypt } from '../../utils/AES'
export default {
  props: {
    breed: {
      type: [String, Number],
    },
  },
  data(){
    return{
      navItems:[
        { name: '进出口', id: '' },
        { name: '种植面积', id: '' },
        { name: '单产', id: '' },
        { name: '总产', id: '' },
      ],
      active:0,
      loading:false,
    }
  },
  mounted() {
    this.changeActive(0);
  },
  methods: {
    changeActive(index) {
      console.log(this.navItems[index]);
      this.active = index;
      switch (this.active) {
        case 0:
          this.getData();
          break;
        case 1:
          this.getProductData(this.breed, '播种面积');
          break;
        case 2:
          this.getProductData(this.breed, '单位面积产量');
          break;
        case 3:
          this.getProductData(this.breed, '产量');
          break;
        default:
          break;
      }
      // id.value = items[index].id;
      // loading.value = true;
    },
    // 获取进出口数据
    async getData(){
      this.loading = true;
      const data = await $fetch(
        `/datacenter/web/programCustoms/datalist`,
        { 
          method: 'Get',
          params: { 
            childKind:this.breed,
          } 
        }
      );
      console.log('进出口数据',data.result);
      let rawData = data.result.reverse();
      // 进口数据
      // let DateA = rawData.map(obj => obj.inOut == '进口' ? obj.yearDate : null);
      let DateA = rawData.filter(obj => obj.inOut === '进口').map(obj => obj.yearDate);
      let DataA = rawData.filter(obj => obj.inOut === '进口').map(obj => obj.value);
      console.log('进口日期',DateA,DataA);
      // 出口数据
      let DateB = rawData.filter(obj => obj.inOut === '出口').map(obj => obj.yearDate);
      let DataB = rawData.filter(obj => obj.inOut === '出口').map(obj => obj.value);
      console.log('出口日期',DateB,DataB);
      const series = [
        {
          name: this.breed + '进口',
          type: 'bar',
          // tooltip: {
          //   valueFormatter: function (value) {
          //     return value + ' ml';
          //   }
          // },
          data: DataA
        },
        {
          name: this.breed + '出口',
          type: 'bar',
          data: DataB
        },
      ];
      this.loading = false;
      this.initChart(DateA,series);
    },
    // 获取产情数据--种植面积产量
    async getProductData(breed, target){
      this.loading = true;
      const data = await $fetch(
        `/datacenter/web/programProduct/list`,
        { 
          method: 'Get',
          params: {
            kind:breed,
            childKind:breed,
            area:'中国', 
            target:breed + target,
            pageNo:1,
            pageSize:10
          } 
        }
      );
      console.log('种植面积数据',decrypt(data.result).records);
      let rawData = decrypt(data.result).records.reverse();
      let Date = rawData.map(obj => obj.yearDate);
      let Data = rawData.map(obj => obj.value);
      const series = {
        name: breed + target,
          type: 'bar',
          data: Data
      };
      this.loading = false;
      this.initChart(Date,series);
    },
    //绘制图表 
    initChart(allDates,series) {
      const chart = this.$echarts.init(this.$refs.chart);
      chart.clear();
      let option = {
        // title: { text: 'Nuxt + ECharts 示例' },
        grid:{
          x:10,
          y:10,
          x2:10,
          y2:10
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            let result = '';
            params.forEach(item=>{
              const displayValue = item.axisValue.length > 4 
              ? item.axisValue.slice(0, 7) 
              : item.axisValue;
              result += item.marker +  displayValue + item.seriesName + '<br>'
            })
            return result;
          }
        },
        // legend: { data: ['进口', '出口'] },
        // trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        },
        xAxis: { 
          type: 'category',
          data: allDates,
          axisPointer: {
              type: 'shadow'
          },
          axisLabel:{
            formatter: function(value) {
              return value.toString().slice(0, 7)
            }
          }
        },
        yAxis: {
          splitNumber: 3,
          axisLabel: {
            formatter: function(value) {
              if(value == 0 ){
                return value;
              }else{
                if(value.toString().length == 7){
                  return value.toString().slice(0, 3) + '万吨';
                }else if(value.toString().length == 8){
                  return value.toString().slice(0, 2) + '百万吨';
                }else{
                  return value
                }
              }
            }
          }
        },
        series: series,
      };
      // if(this.active !== 0){
      //   option.yAxis.min = (value)=>{
      //       return Math.floor(value.min / 100)*100-100
      //   };
      //   option.yAxis.max = (value)=>{
      //       return Math.floor(value.max / 100)*100-100
      //   };
      // }
      chart.setOption(option);
      // 响应式调整大小
      window.addEventListener('resize', () => chart.resize());
    },
  },
  beforeDestroy() {
    // 组件销毁时移除监听器
    window.removeEventListener('resize', this.resizeHandler);
  },
}
</script>

<style lang="scss" scoped>
  .box{
    height: 166px;
    background-color: #fafafa;
    .nav{
      width: 100%;
      height: 32px;
      background-color: #f0f6fa;
      display: flex;
      .nav-item{
        // width: 30%;
        margin-left: 10px;
        font-size: 14px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        .line{
          width: 100%;
          height: 2px;
          background-color: #f0f6fa;
        }
        .active{
          background-color: #0f4494;
        }
      }
    }
    .chartsbox{
      width: 100%;
      height: 132px;
      // background-color: #eee;
    }
  }
</style>